<template>
    <div class="consumption-list">
        <!-- 搜索区域 -->
        <div class="search-area" style="margin: 20px; display: flex; gap: 20px; align-items: center;">
            <el-input v-model="searchForm.username" placeholder="请输入用户名或者手机号搜索" style="width: 300px" clearable
                @clear="handleSearch" @input="handleSearch">
                <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>

            <el-select v-model="searchForm.type" placeholder="请选择赛事类型" clearable @change="handleSearch"
                style="width: 150px">
                <el-option label="篮球" value="2"></el-option>
                <el-option label="足球" value="1"></el-option>
            </el-select>
            <el-select v-model="searchForm.payType" placeholder="请选择购买类型" clearable @change="handleSearch"
                style="width: 150px">
                <el-option label="免费" value="3"></el-option>
                <el-option label="次数卡" value="2"></el-option>
                <el-option label="球钻" value="1"></el-option>
            </el-select>

            <el-button @click="czFun">重置</el-button>
        </div>

        <!-- 表格区域 -->
        <el-table :data="tableData" style="width: 100%" border>
            <el-table-column prop="mobile" label="手机号" align="center"></el-table-column>
            <el-table-column prop="nickname" label="用户名" align="center"></el-table-column>
            <el-table-column prop="consumptionType" label="消费方式" align="center">
                <template slot-scope="scope">
                    {{ formatType(scope.row.if_buy) }}
                </template>
            </el-table-column>
            <el-table-column prop="sportType" label="预测类型" align="center">
                <template slot-scope="scope">
                    {{ scope.row.type == '1' ? '足球' : '篮球' }}
                </template>
            </el-table-column>
            <el-table-column prop="create_time" label="消费时间" align="center">
                <template slot-scope="scope">
                    {{ formatDate(scope.row.create_time) }}
                </template>
            </el-table-column>
            <el-table-column prop="home_team_name" label="主队" align="center"></el-table-column>
            <el-table-column prop="away_team_name" label="客队" align="center"></el-table-column>

            <el-table-column label="操作" align="center" width="120">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="handlePreview(scope.row)">预览</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination" style="margin-top: 20px; text-align: right; padding-right: 20px;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

        <!-- 预览弹窗 -->
        <el-dialog title="足球预测预览" :visible.sync="previewDialogVisible" width="50%">
            <div v-if="currentPreviewData" class="preview-content">
                <div class="match-info">
                    <h3 class="match-title">{{ currentPreviewData.prediction.match }}</h3>

                    <div class="probability-section">
                        <h4>胜平负概率</h4>
                        <div class="probability-bars">
                            <div class="probability-item">
                                <div class="team-name">{{ currentPreviewData.prediction.win_probability['主队'].name }}
                                </div>
                                <el-progress
                                    :percentage="parseInt(currentPreviewData.prediction.win_probability['主队'].value)"
                                    color="#67C23A"></el-progress>
                            </div>
                            <div class="probability-item">
                                <div class="team-name">{{ currentPreviewData.prediction.win_probability['客队'].name }}</div>
                                <el-progress
                                    :percentage="parseInt(currentPreviewData.prediction.win_probability['客队'].value)"
                                    color="#F56C6C"></el-progress>
                            </div>
                            <div class="probability-item">
                                <div class="team-name">{{ currentPreviewData.prediction.win_probability['平局'].name }}</div>
                                <el-progress
                                    :percentage="parseInt(currentPreviewData.prediction.win_probability['平局'].value)"
                                    color="#909399"></el-progress>
                            </div>
                        </div>
                    </div>

                    <div class="score-section">
                        <h4>可能比分</h4>
                        <div class="score-tags">
                            <el-tag v-for="(score, index) in currentPreviewData.prediction.possible_scores" :key="index"
                                type="success" style="margin-right: 10px;">
                                {{ score }}
                            </el-tag>
                        </div>
                    </div>

                    <div class="info-grid">
                        <div class="info-item">
                            <span class="label">总进球数：</span>
                            <span class="value">{{ currentPreviewData.prediction.total_goals.range ? currentPreviewData.prediction.total_goals.range : currentPreviewData.prediction.total_goals  }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">得分能力：</span>
                            <span class="value" style="margin-right: 10px" v-for="(key,ss) in currentPreviewData.prediction.scoring_ability" :key="key">{{ ss }}  {{ key }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">爆冷指数：</span>
                            <span class="value">{{ currentPreviewData.prediction.upset_index }}</span>
                        </div>
                    </div>

                    <div class="notes-section">
                        <h4>补充说明</h4>
                        <p class="notes-content">{{ currentPreviewData.prediction.additional_notes }}</p>
                    </div>
                </div>
            </div>

        </el-dialog>

        <el-dialog title="篮球预测预览" :visible.sync="previewDialogVisibleBask" width="50%">
           
            <div v-if="currentPreviewDataBask" class="preview-content">
                <div class="match-info">
                    <h3 class="match-title">{{ currentPreviewDataBask.prediction.match }}</h3>

                    <div class="win-lose-section">
                        <h4>胜负分析</h4>
                        <div class="probability-bars">
                            <div class="probability-item">
                                <div class="team-name">{{ currentPreviewDataBask.prediction.win_lose_analysis['主队'].name }}
                                </div>
                                <el-progress
                                    :percentage="parseInt(currentPreviewDataBask.prediction.win_lose_analysis['主队'].value)"
                                    color="#67C23A"></el-progress>
                            </div>
                            <div class="probability-item">
                                <div class="team-name">{{ currentPreviewDataBask.prediction.win_lose_analysis['客队'].name }}
                                </div>
                                <el-progress
                                    :percentage="parseInt(currentPreviewDataBask.prediction.win_lose_analysis['客队'].value)"
                                    color="#F56C6C"></el-progress>
                            </div>
                        </div>
                        <div class="analysis-insight">
                            <p>{{ currentPreviewDataBask.prediction.win_lose_analysis.insight }}</p>
                        </div>
                    </div>

                    <div class="over-under-section">
                        <h4>大小分分析</h4>
                        <div class="probability-bars">
                            <div class="probability-item">
                                <div class="team-name">大分概率</div>
                                <el-progress :percentage="currentPreviewDataBask.prediction.over_under_analysis.over_rate"
                                    color="#409EFF"></el-progress>
                            </div>
                            <div class="probability-item">
                                <div class="team-name">小分概率</div>
                                <el-progress :percentage="currentPreviewDataBask.prediction.over_under_analysis.under_rate"
                                    color="#E6A23C"></el-progress>
                            </div>
                        </div>
                        <div class="analysis-insight">
                            <p>{{ currentPreviewDataBask.prediction.over_under_analysis.insight }}</p>
                        </div>
                    </div>
                </div>
            </div>

        </el-dialog>
    </div>
</template>

<script>
import { getAixiaoqiu } from '@/api/aixiaoqiu'
export default {
    name: 'ConsumptionList',
    data() {
        return {
            // 搜索表单
            searchForm: {
                username: '',
                type: '',
                payType: ''
            },
            // 表格数据
            tableData: [],
            // 分页相关
            currentPage: 1,
            pageSize: 10,
            total: 0,
            // 预览弹窗
            previewDialogVisible: false,
            currentPreviewData: null,
            previewDialogVisibleBask: false,
            currentPreviewDataBask: null
        }
    },
    created() {
        this.getList()
    },
    methods: {
        czFun() {
             this.currentPage = 1;
             this.searchForm = {
                username: '',
                type: '',
                payType: ''
             }   
             this.getList()
        },
        formatType(type) {
            
            let ttype = ''

            switch (type) {
                case 3:
                    ttype = '免费'
                    break;
                    case 2:
                    ttype = '次数卡'
                    break;    
                    case 1:
                    ttype = '球钻'
                    break;    
            }
            return ttype
        },
        // 获取列表数据
        async getList() {


            const res = await getAixiaoqiu({
                page: this.currentPage,
                list_rows: this.pageSize,
                type: this.searchForm.type,
                if_buy: this.searchForm.payType,
                nickname: this.searchForm.username
            })

            // 这里替换为实际的API调用
            // const params = {
            //   page: this.currentPage,
            //   limit: this.pageSize,
            //   username: this.searchForm.username,
            //   type: this.searchForm.type
            // }
            // getConsumptionList(params).then(res => {
            //   this.tableData = res.data.list
            //   this.total = res.data.total
            // })

            // 模拟数据
          
            this.tableData = res.data.data;

            this.total = res.data.total
        },

        // 搜索处理
        handleSearch() {
            this.currentPage = 1
            this.getList()
        },

        // 预览处理
        handlePreview(row) {
            let cleanedStr = row.content.replace(/^```json|```$/g, '');

            let obj = JSON.parse(cleanedStr);
            if (row.type == 2) {
                this.currentPreviewDataBask = obj
                this.previewDialogVisibleBask = true
            } else {
                this.currentPreviewData = obj;
                this.previewDialogVisible = true
            }

        },

        // 分页大小改变
        handleSizeChange(val) {
            this.pageSize = val
            this.getList()
        },

        // 当前页改变
        handleCurrentChange(val) {
            this.currentPage = val
            this.getList()
        },

        // 格式化日期
        formatDate(date) {
            if (!date) return ''
            const d = new Date(date)
            return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
        }
    }
}
</script>

<style scoped>
.consumption-list {
    padding: 20px;
}

.preview-content {
    padding: 20px;
}

.match-title {
    text-align: center;
    margin-bottom: 20px;
    color: #303133;
}

.probability-section {
    margin-bottom: 20px;
}

.probability-bars {
    margin-top: 10px;
}

.probability-item {
    margin-bottom: 15px;
}

.team-name {
    margin-bottom: 5px;
    font-size: 14px;
    color: #606266;
}

.score-section {
    margin-bottom: 20px;
}

.score-tags {
    margin-top: 10px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.info-item {
    display: flex;
    align-items: center;
}

.label {
    color: #606266;
    margin-right: 10px;
}

.value {
    color: #303133;
    font-weight: 500;
}

.notes-section {
    margin-top: 20px;
}

.notes-content {
    color: #606266;
    line-height: 1.6;
    margin-top: 10px;
}

h4 {
    color: #303133;
    margin-bottom: 10px;
}

.analysis-insight {
    margin-top: 15px;
    padding: 10px;
    background-color: #f5f7fa;
    border-radius: 4px;
}

.analysis-insight p {
    color: #606266;
    line-height: 1.6;
    margin: 0;
}

.win-lose-section,
.over-under-section {
    margin-bottom: 25px;
    padding: 15px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
